<template>
	<view style="padding: 0 18px;">
		<view class="flex flex-row" style="background-color: #FCE9EA;height:45px;border-radius: 9px;color:#FE7743;">
			<view
				class="flex-1 flex justify-center items-center"
				style="border-top-left-radius:9px;border-bottom-left-radius: 9px;"
				:class="[currentSubSection == 0 ? 'active-color' : '']"
				@click="sectionChange(0)"
			>
				验证码登录
			</view>
			<view
				class="flex-1 flex justify-center items-center"
				style="border-top-right-radius: 9px;border-bottom-right-radius: 9px;"
				:class="[currentSubSection == 1 ? 'active-color' : '']"
				@click="sectionChange(1)"
			>
				密码登录
			</view>
		</view>
		<view v-if="currentSubSection == 0">
			<view class="flex flex-row items-center" style="padding:0 10px;margin-top:31px;height:53px;background-color: #F6F6F6;border-radius: 9px;">
				<u-input placeholder="" v-model="signincodeForm.phonenumber"><u--text text="账 号:" slot="prefix" margin="0 3px 0 0"></u--text></u-input>
			</view>
			<view class="flex flex-row items-center" style="margin-top:31px;">
				<view class="flex-1 flex flex-row items-center" style="padding-left:10px;height:53px;background-color: #F6F6F6;border-radius: 9px;">
					<u-input placeholder="" v-model="signincodeForm.code"><u--text text="验证码:" slot="prefix" margin="0 3px 0 0"></u--text></u-input>
				</view>
				<view class="flex flex-row justify-center items-center" style="color:#BB1512;width:100px;height:53px;">
					<view @click="sendSignUpcode" v-show="show">获取验证码</view>
					<view class="register-msg-btn" v-show="!show">{{ count }} s</view>
				</view>
			</view>
		</view>
		<view v-if="currentSubSection == 1">
			<view class="flex flex-row items-center" style="padding:0 10px;margin-top:31px;height:53px;background-color: #F6F6F6;border-radius: 9px;">
				<u-input placeholder="" v-model="signinForm.loginName"><u--text text="账 号:" slot="prefix" margin="0 3px 0 0"></u--text></u-input>
			</view>
			<view class="flex flex-row items-center" style="padding:0 10px;margin-top:31px;height:53px;background-color: #F6F6F6;border-radius: 9px;">
				<u-input placeholder="" v-model="signinForm.password">
					<u--text text="密 码:" slot="prefix" margin="0 3px 0 0"></u--text>
					<template slot="suffix">
						<u-icon name="eye-off" color="#444444" size="28"></u-icon>
					</template>
				</u-input>
			</view>
		</view>
		<u-button type="primary" text="登录" customStyle="margin-top:20px;height:53px;border-color:#FE7743;background: #FE7743;border-radius: 9px;" @click="gologin"></u-button>
		<view class="flex flex-row justify-evenly" style="margin-top:12px;">
			<view class="flex-1 flex justify-start" style="font-size: 14px;color: #000000;" @click="goresult">注册</view>
			<view class="flex-1 flex justify-end" style="font-size: 14px;color: #000000;" @click="goforgot">忘记密码</view>
		</view>
		<view style="margin-top:162px;font-size: 14px;color: #000000;">
			登录即表示您已阅读、理解并同意
			<text style="color:#FE7743;">《第1园区系统服务协议》</text>
			、
			<text style="color:#FE7743;">《第1园区系统隐藏保护政策》</text>
			，若您不同意协议或政策，请勿进行后续操作！
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: true,
			timer: null,
			count: '',
			subSectionList: ['验证码登录', '密码登录'],
			currentSubSection: 0,
			tips: '',
			signinForm: {
				loginName: '',
				password: ''
			},
			signincodeForm: {
				phonenumber: '',
				code: ''
			}
		};
	},
	methods: {
		// 发送验证码
		sendSignUpcode() {
			let that = this;
			if (this.signincodeForm.phonenumber == '') {
				return uni.$u.toast('请输入正确的手机号');
			}
			this.$apiCall.request(
				'post',
				'/sendcode',
				{ phonenumber: this.signincodeForm.phonenumber },
				{
					sucCb(data) {
						if (data.result === 1) {
							// this.resetTemp()
							uni.$u.toast('发送成功');
							that.getCode();
						} else {
							uni.$u.toast(data.msg);
						}
					}
				}
			);
		},
		getCode() {
			this.show = false;
			const TIME_COUNT = 60;
			if (!this.timer) {
				this.count = TIME_COUNT;
				this.show = false;
				this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {
						this.count--;
					} else {
						this.show = true;
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000);
			}
		},
		goforgot() {
			uni.navigateTo({
				url: '/pages/forgotpasd/forgotpasd'
			});
		},
		gologin() {
			if (this.currentSubSection == 0) {
				if (!this.signincodeForm.phonenumber) {
					return uni.$u.toast('请输入账号');
				}
				if (!this.signincodeForm.code) {
					return uni.$u.toast('请输入验证码');
				}

				this.$apiCall.request('post', '/mobilelogin', this.signincodeForm, {
					sucCb(data) {
						console.info(data);
						if (data.result === 1) {
							// this.resetTemp()
							uni.$u.toast('登录成功');
							localStorage.setItem('token', data.data.token);
							uni.navigateTo({
								url: '/pages/index/index'
							});
						} else {
							uni.$u.toast(data.msg);
						}
					}
				});
			} else {
				if (!this.signinForm.loginName) {
					return uni.$u.toast('请输入账号');
				}
				if (!this.signinForm.password) {
					return uni.$u.toast('请输入密码');
				}

				this.$apiCall.request('post', '/login', this.signinForm, {
					sucCb(data) {
						console.info(data);
						if (data.result === 1) {
							// this.resetTemp()
							uni.$u.toast('登录成功');
							localStorage.setItem('token', data.data.token);
							uni.navigateTo({
								url: '/pages/index/index'
							});
						} else {
							uni.$u.toast(data.msg);
						}
					}
				});
			}
		},
		goresult() {
			uni.navigateTo({
				url: '/pages/register/register'
			});
		},
		sectionChange(index) {
			this.currentSubSection = index;
		},
		codeChange(text) {
			this.tips = text;
		}
	}
};
</script>

<style lang="scss">
.active-color {
	background-color: #fe7743;
	color: #ffffff;
}
</style>
